html, body { height: 100%; background-color:white;}
* { margin:0px;padding:0px;font-family:arial;font-size:10px; }
body ul a { list-style:none;color:white;text-decoration:none;
		font-size:15px;padding:10px;border-bottom:5px solid white;}
body ul a:hover{ list-style:none;color:orange;text-decoration:none;
		font-size:15px;padding:10px;border-bottom:5px solid orange;}
body ul li{ display:inline; }
body ul { padding:40px;text-align:right;}

a img { border:0px; }
#logo { float:left;padding-right:8px;padding-left:8px;height:48px;width:48px;}
#site-logo-area { float:left;width:auto; }
#title { font-size:13px;color:white;float:left;margin-top:1px; }
#slogan { margin-top:10px;color:white;font-size:25px; }
#language_area a { color:#666;background:white;padding:4.5px;float:right;
	text-decoration:none;display:block;font-size:15px;width:70px;text-align:center;
	border-top:#666 solid 3px;margin-right:10px;}
#language_area a:hover { color:#6D9C01;padding:4.5px;float:right;
	display:block;font-size:15px;width:70px;text-align:center;
	border-top:#6D9C01 solid 3px; }
.resultmessage a { color:black;font-size:20px; }

div#commandbox { position:fixed;bottom:35px;right:10px;height:70%;width:50%;border:1px solid orange;display:none;
	filter:alpha(opacity=85);-moz-opacity:0.85;-khtml-opacity:0.85;opacity:0.85;}
#commandbox a { color:black;}
	.command { font-size:15px;border:solid orange 1px;color:black;height:90%;width:95%;margin:1%;padding:1%; }
	input { margin:1%;padding:1%;font-family:TrebuchetMS;font-size:15pt; font-weight:bold;border-color:orange; border-style:solid; border-width:1px; color:black;width:95%;}
	.contentbox { padding:20px;color:black;font-size:20px; }

#links ul { clear:both;list-style-type: none; }
#links li a { border-bottom:1px orange solid;border-right:1px orange solid;border-left:1px orange solid;color:black;float:left;font-size:17px;padding:5px; }
#links li a:hover { border-bottom:1px black solid;border-right:1px black solid;border-left:1px black solid;color:black;float:left;font-size:17px;padding:5px; }
#links li { margin-right:20px;float:left;font-size:17px;margin: 5px 5px; }
#links { width:45%;font-size:20px;padding:0px;color:black; }
#m-coloum { float:left;display:block; position:relative;}
/*the two coloums*/
#twitter_ranks { height:100%;float:right;overflow:hidden;top:110px;;width:100%;right:0px;display:none; }
#twitter_ranks_out { position:relative;overflow:hidden;color:orange;padding:10px;display:none;}
#twitter_results { left:none;height:100%;width:100%;display:none;clear:both; }
#twitter_results ul li { float:left; }

textarea.reply { width:95%;height:100px;margin:5px;padding:5px; }
.submit_button { width:30px;padding:10px;background-color:white; }
.tweet_result { border-top:1px black solid;float:right;padding:10px;padding:10px;width:90%;font-size:10px;color:black; }
.tweet_result a { font-size:15px;color:#2CC0C6; }
.buttons a { color:White; }
div.buttons { float:right;position:relative;font-size:20px;font:bold;width:93%;	}
div#resultmessage { float:right;}
div#like { font-size:20px;padding:5px;/*background:#FFAA00;*/float:right; }
div#unlike { padding:5px;/*background:#FFD300;*/float:right; }
div#reply { padding:5px;/*background:#FF7400;*/float:right; }
div#time_stamp { padding:5px;/*background:#009999;*/float:right;color:black; }
div#rank { padding:5px;/*background:#DB0058;*/float:right;color:black; }
.tweet_user { margin-right:5px; }


/* THe things for twitter_results*/
#twitter_results ul { padding:0px;list-style-type:none; } 
#twitter_results li { margin-bottom:10px;}
#twitter_results li a { border:none;left:0px;padding:0px;color:orange;display: block;font-size:15px;text-decoration: none;text-align:left;width:100%}
* html #twitter_results li a {  /* make hover effect work in IE */}
#twitter_results li a:hover { color:black; }
#twitter_results a em { color:black;display:block;font: normal 85% Verdana, Helvetica, sans-serif;line-height: 125%;background:transparent; }
#twitter_results a span { color: orange;font: normal 70% Verdana, Helvetica, sans-serif;line-height: 150%; } /*color: #99cc00 #3399ff*/
#language_area a {}
/* THe things for twitter_rankings*/
#twitter_ranks ul { list-style-type: none;display:none; } 
#twitter_ranks li { font-size:13px;border: 1px dotted #999;border-width: 1px 0;margin: 5px 0;}
#twitter_ranks li a { display: block;font: bold 120% Arial, Helvetica, sans-serif;padding: 5px;text-decoration: none;}
* html #twitter_ranks li a {  /* make hover effect work in IE */}
#twitter_ranks li a:hover { background:#C99;color:black; }
#twitter_ranks a em { color:black;display:block;font: normal 85% Verdana, Helvetica, sans-serif;line-height: 125%;background:transparent; }
#twitter_ranks a span { color: #99cc00;font: normal 70% Verdana, Helvetica, sans-serif;line-height: 150%; }
/* <!-- */
#navigation { padding:0px;position:fixed;top:180px;left:0px;width:160px;display:block;background:none;}
#navigation ul { padding:0px;list-style-type:none;background:none;}
#navigation li { display:block; }
#navigation li a { font-size:15px;color:#666;float:left;text-align:right;
	border-left:4px white solid;
	border-bottom:none;
	width:100%; }
#navigation li img { float:right;} 
#navigation li a:hover { font-size:15px;color:orange;float:left;border-left:4px white solid; }
/* General styles */
.contentbox { color:black;font-size:20px;clear:both;
	border-top:#333 1px dotted;
	display:block;float:left;}
.contentbox a {text-decoration:none;font-size:20px;}
.contentbox a:hove {text-decoration:none;font-size:20px;color:orange;}
.contentbox li { display:block;color:black;font-size:20px;padding:5px;margin-top:20px;}
.contentbox em { font-size:35px;color:#336699;}
body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:black;
	min-width:600px;		/* Minimum width of layout - remove line if not required */					/* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;
}
a {
	color:black;
}
a:hover {
	text-decoration:none;
}
h1, h2, h3 {
	margin:.8em 0 .2em 0;
	padding:0;
}
p {
	margin:.4em 0 .8em 0;
	padding:0;
}
img {
	margin:10px 0 5px;
}
/* Header styles */
#header {
	clear:both;
	float:left;
	width:100%;
	height:130px;
	/*display:none;*/
}
#header {
	border-bottom:1px solid white;
}
#header p,
#header h1,
#header h2 {
	padding:.4em 15px 0 15px;
	margin:0;
}
#header ul {
	position:absolute;
	top:60px;
	right:30%;
	width:100%;
	list-style:none;
	margin:10px 10px 0 0;
	padding:0;
}
#header ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}
#header ul li a {
	display:block;
	float:right;
	margin:0 0 0 1px;
	padding:3px 10px;
	text-align:center;
	background:white;
	color:orange;
	text-decoration:none;
	position:relative;
	left:15px;
	border-bottom:4px solid orange;
	line-height:1.3em;
	font-size:20px;
}
#header ul li a:hover {
	color:black;
	border-bottom:black 4px solid;
}
#header ul li a.active,
#header ul li a.active:hover {
	color:black;
	border-bottom:black 4px solid;
	font-size:20px;
}
#header ul li a span {
	display:block;
	background-color:orange;
}
/* 'widths' sub menu */
#layoutdims {
	clear:both;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}
/* column container */
/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		top:100px;
		width:100%;			/* width of whole page *//* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}
	/* 3 Column settings */
	.threecol {
		background:#eee;		/* right column background colour */
	}
	.threecol .colmid {
		right:25%;			/* width of the right column */
		background:#fff;		/* center column background colour */
	}
	.threecol .colleft {
		right:50%;			/* width of the middle column */
		background:#f4f4f4;	/* left column background colour */
	}
	.threecol .col1 {
		width:46%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
	}
	.threecol .col2 {
		width:21%;			/* Width of left column content (column width minus padding on either side) */
		left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	}
	.threecol .col3 {
		width:21%;			/* Width of right column content (column width minus padding on either side) */
		left:85%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
	}
.ccol2 { padding:5px;font-size:14px;}
.ccol2 a { font-size:14px;text-decoration:none;display:block;padding:4px;color:#336699; }
.ccol2 a:hover{ color:black; }
.ccol2 span { font-size:20px;color:#336699; }
.ccol2 li { font-size:15px;padding-bottom:10px;color:black;display:block; }
.ccol2 {color:#336699;width:20%;}
/* Footer styles */
#footer { color:orange;clear:both;border-bottom:1px solid orange;padding-left:3%;padding-right:3%;height:36px;}
#footer a { text-decoration:none;padding:6px;float:left;
	display:none;font-size:20px;text-align:center;
	color:orange;
	/*border-left:1px solid orange;
	border-top:1px solid white;
	border-bottom:1px solid orange;
	border-right:1px solid orange;*/}
#footer a:hover{ color:black; }
#footer span { padding:6px;font-size:20px;color:black;float:right;margin-right:6%;
	/*border-left:1px solid orange;
	border-top:1px solid white;
	border-bottom:1px solid orange;
	border-right:1px solid orange;*/}
/* --> */
	<!--<div class="colmid">
		<div class="colleft">
		<div class="col2">
			<div class="col1">
				<!-- Column 1 start -->
				
				<div class = 'contentbox' id = 'twitterblock'>
					<div id = 'twitter_results'>
						<ul>
						</ul>
					</div>
				</div>
				<div id = 'twitter_ranks'>
					<ul>
					</ul>
				</div>
		</div>
		<!-- Column 1 end -->
	</div>
</div>
</div>
</div>
<div id = 'commandbox'><textarea class = 'command' id = 'command'></textarea></div>
<body>
<div id = "navigation">
	<ul>
		<li><img src = "{{static_url('images/facebook.png')}}" height="30"/></li>
		<li><a href = 'http://twitter.com/cloudyama'>{{twitter}}</a></li>
		<li><a href = "javascript:toggle_content()" id = "twitter_blog" style = "color:#FF7400;">{{self_intro}}</a></li>
		<li><a href = 'javascript:toggle_stream()' id = "info-ranking" style = "color:#FF7400;">{{ladder}}</a></li>
		<li><a href = 'javascript:toggle_stream()' id = "cmt_like" style = "display:none;color:#BF7130;" >{{like}}</a></li>
		<li><a href = 'javascript:toggle_stream()' id = "cmt_dislike" style = "display:none;color:#A64B00;">{{dislike}}</a></li>
		<li><a href = 'javascript:show_textbox()' id = "cmt_comment" style = "color:#FF9640;">{{speak}}</a></li>
		<li><a><span id="clock" style = 'font-size:15px;color:#777;'>&nbsp;</span></a></li>
	</ul>
</div> -->